'use strict';

window.onload = function () {
  // 确定第一行能放几 n 张图
  // 1. 获取屏幕宽度
  // 2. 获取图片的宽度
  // 操作第 n+1 张 摆放它的位置  放在高度最小的那一列
  // 1. 获取每一列的高度
  // 2. 更新这一列的高度

  imgLocation('container', 'box');

  function imgLocation(parent, child) {
    const cParent = document.getElementById(parent);
    const cChild = cParent.getElementsByClassName(child);

    // 获取屏宽
    const screenWidth = window.innerWidth;
    const imgWidth = cChild[0].offsetWidth;
    const num = Math.floor(screenWidth / imgWidth);
    cParent.style.width = `${imgWidth * num}px`;

    // 操作第 num+1 张图
    const boxHeightArr = [];
    for (let i = 0; i < cChild.length; i++) {
      // 第一行
      if (i < num) {
        boxHeightArr.push(cChild[i].offsetHeight);
      } else {
        // 找数组最小值
        const minHeight = Math.min(...boxHeightArr);
        const minIndex = boxHeightArr.indexOf(minHeight);

        // 摆放图片
        cChild[i].style.position = `absolute`;
        cChild[i].style.top = minHeight + 'px';
        cChild[i].style.left = cChild[minIndex].offsetLeft + 'px';

        // 更新此列高度
        boxHeightArr[minIndex] += cChild[i].offsetHeight;
      }
    }
  }
};
